<template>
  <div v-if="isRun" class="main" ref="main">
    <div>
      <div @click="submit" class="fbtn">提交</div>
      <van-form ref="zform">
        <van-cell-group inset>
          <van-field
            v-model="form.GuestName"
            name="姓名"
            label="姓名:"
            required
            placeholder="请填写姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <van-field
            v-model="form.MobilePhone"
            name="手机号"
            label="手机号:"
            required
            placeholder="请填写手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="form.IdCardNo"
            name="证件号"
            label="证件号:"
            placeholder="请填写证件号"
            required
            :rules="[{ required: true, message: '请填写证件号' }]"
          />
          <van-field
            v-model="form.CarNo"
            name="车牌号"
            label="车牌号:"
            placeholder="请填写车牌号"
          />

          <van-field
            v-model="form.GuestCompany"
            name="来访单位"
            required
            label="来访单位:"
            placeholder="请填写来访单位"
            :rules="[{ required: true, message: '请填写来访单位' }]"
          />

          <van-field
            v-model="form.VisitDate"
            name="来访日期"
            is-link
            label="来访日期"
            placeholder="请选择来访日期"
            readonly
            @click="timeShowPop = true"
            :rules="[{ required: true, message: '请选择来访日期' }]"
          >
          </van-field>

          <van-field
            v-model="form.Reason"
            name="来访事由"
            label="来访事由:"
            placeholder="请填写来访事由"
            type="textarea"
            maxlength="500"
            :rules="[{ required: true, message: '请填写来访事由' }]"
            show-word-limit
            label-align="top"
            autosize
          />
        </van-cell-group>
      </van-form>
      <div
        style="
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: center;
          font-size: 16px;
        "
      >
        <van-button
          class="btnStyle"
          style="position: absolute; bottom: -14px; margin: 0 auto"
          type="primary"
          @click="add"
          >添加随访人员</van-button
        >
      </div>
    </div>
  </div>
  <div
    style="
      margin-top: 50%;
      font-size: 20px;
      font-weight: 600;
      display: flex;
      justify-content: center;
    "
    v-else
  >
    验证码失效，请重新获取验证码
  </div>
  <div
    v-for="(e, i) in form.list"
    style="
      margin-top: 40px;
      width: 90%;
      height: 150px;
      margin: 40px auto;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      font-size: 15px;
      position: relative;
    "
  >
    <div
      style="
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        height: 20px;
        position: absolute;
        left: 10px;
        border-radius: 4px;
        top: 4px;
        background-color: #0e50a5;
        font-size: 14px;
        padding: 2px 3px;
      "
    >
      随访人员 {{ i + 1 }}
    </div>
    <div
      style="
        display: flex;

        margin-top: 20px;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        width: 100%;
      "
    >
      <div>姓名:{{ e.GuestName }}</div>
      <div>手机号:{{ e.MobilePhone }}</div>
    </div>
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
      "
    >
      <div>证件号:{{ e.IdCardNo }}</div>
      <div>车牌号:{{ e.CarNo }}</div>
    </div>
  </div>

  <van-popup
    v-model:show="showBottom"
    position="bottom"
    round
    closeable
    :style="{ height: '40%', overflow: 'hidden' }"
  >
    <div
      style="
        position: relative;
        border: 1px solid transparent;
        width: 100%;
        height: 100%;
        overflow: hidden;
      "
    >
      <van-form style="margin-top: 30px" label-width="110" ref="zform">
        <div class="sfr">随访人信息登记:</div>
        <van-cell-group inset>
          <van-field
            v-model="vform.GuestName"
            name="姓名"
            label="姓名:"
            placeholder="请填写姓名"
          />
          <van-field
            v-model="vform.MobilePhone"
            name="手机号"
            label="手机号:"
            placeholder="请填写手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="vform.IdCardNo"
            name="证件号"
            label="证件号:"
            placeholder="请填写证件号"
            :rules="[{ required: true, message: '请填写证件号' }]"
          />
          <van-field
            v-model="vform.CarNo"
            name="车牌号"
            label="车牌号:"
            placeholder="请填写车牌号"
            :rules="[{ required: true, message: '请填写车牌号' }]"
          />
        </van-cell-group>
      </van-form>
      <div
        style="
          width: 100%;
          height: 40px;
          position: absolute;
          bottom: 0px;
          color: white;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #0e50a5;
          font-size: 16px;
        "
        @click="addVisitor"
      >
        新增
      </div>
    </div></van-popup
  >

  <TimePicerCom
    @confirm="tconfirm"
    @close="timeShowPop = false"
    :is-show="timeShowPop"
  ></TimePicerCom>
  <PickerCom
    :title="title"
    :is-show="showPop"
    :picker-list="columns"
    @confirm="optionConfirm"
    @close="showPop = false"
  ></PickerCom>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import TimePicerCom from "@/components/timePicerCom.vue";
import PickerCom from "@/components/pickerCom.vue";
import { showNotify, showToast } from "vant";
import { verifycheckcode, addguestrecord } from "@/api/others";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
const route = useRoute();
const title = ref<string>("");
const columns = ref<any>([]);
const showBottom = ref(false);
const isRun = ref(false);
const form = ref<any>({
  list: [],
  // VisitDate:
});

const vform = ref<any>({
  GuestName: "",
  MobilePhone: "",
  IdCardNo: "",
  CarNo: "",
});
const add = () => {
  showBottom.value = true;
};
const init = async () => {
  form.value.VisitDate = dayjs().add(1, "day").format("YYYY-MM-DD");
  try {
    let res = (await verifycheckcode({
      checkcode: route.query.checkcode,
    })) as any;
    if (res.code != 100) {
      showToast(res.msg);
      isRun.value = false;
    } else {
      isRun.value = true;
    }
  } catch (error: any) {
    if (error.code == -100) {
      showToast(error.msg);
      isRun.value = false;
    }
  }
};
init();
const { proxy } = getCurrentInstance() as any;
const showPop = ref<boolean>(false);
const timeShowPop = ref<boolean>(false);
const optionConfirm = () => {};
const submit = () => {
  proxy.$refs.zform
    .validate()
    .then(async () => {
      try {
        let res = await addguestrecord({
          guestinfo: form.value,
          followlist: form.value.list,
          checkcode: route.query.checkcode,
        });
        showToast(res.msg);
        console.log(res, "res");
      } catch (error: any) {
        showToast(error.msg);
      }
    })
    .catch((err: any) => {
      showNotify({ type: "warning", message: err[0].message });
    });
};
const addVisitor = () => {
  let obj = vform.value;
  form.value.list.push(obj);
  showToast("新增成功");
  showBottom.value = false;
};
const tconfirm = (e: any) => {
  form.value.VisitDate = e;
  timeShowPop.value = false;
};
</script>

<style lang="scss" scoped>
.sfr {
  margin-left: 30px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
}
.fbtn {
  width: 100%;
  height: 50px;
  background-color: #0e50a5;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: white;
  font-size: 16px;
  bottom: 0;
}
.btnStyle {
  height: 28px;
}
.main {
  margin-top: 44px;
  border: 3px solid #0e50a5;
  box-sizing: border-box;
  position: relative;
  border-top-color: 1px solid transparent;
}
</style>
